<template>
  <div class="nav-bar">
    <div class="nav-buttons">
      <el-button type="primary" @click="showProjectDialog">项目管理</el-button>
      <el-button type="primary" @click="showUploadDialog">批量上传</el-button>
      <el-button type="primary" @click="showDeleteDialog">批量删除</el-button>
      <el-button type="primary" @click="showLogDialog">系统日志</el-button>
    </div>

    <ProjectManagement 
      v-model="dialogVisible"
    />
    
    <log-dialog v-model="logDialogVisible" />
    <BatchUpload
      v-model="uploadDialogVisible"
      :project-list="projectList"
    />
    
    <BatchDelete
      v-model="deleteDialogVisible"
      :project-list="projectList"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import ProjectManagement from '@/components/ProjectManagement.vue'
import BatchUpload from '@/components/BatchUpload.vue'
import BatchDelete from '@/components/BatchDelete.vue'
import LogDialog from '@/components/LogDialog.vue'
import request from '@/utils/request'

const dialogVisible = ref(false)
const uploadDialogVisible = ref(false)
const deleteDialogVisible = ref(false)
const logDialogVisible = ref(false)
const projectList = ref([])

const loadProjects = async () => {
  try {
    const { data } = await request.get('/zhsj/api/getprobysdq?pageindex=0')
    projectList.value = data.records
  } catch (error) {
    ElMessage.error('加载项目列表失败')
  }
}

onMounted(() => {
  loadProjects()
})

const showProjectDialog = async () => {
  dialogVisible.value = true
}

const showUploadDialog = async () => {
  uploadDialogVisible.value = true
}
const showDeleteDialog = async () => {
  deleteDialogVisible.value = true
}
const showLogDialog = async ()=>{
  logDialogVisible.value = true
}
</script>

<style scoped>
.nav-bar {
  padding: 10px 20px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  z-index: 999;
  width: 100%;
}

.nav-buttons {
  display: flex;
  gap: 10px;
}
</style> 